<template>
  <el-row class="s1" v-loading.fullscreen.lock="loading">
    <el-row class="cm">
      <el-form inline>
        <el-form-item label="开始时间">
          <el-date-picker v-model="search.startTime" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss" placeholder="选择开始时间"
            :editable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="结束时间">
          <el-date-picker v-model="search.endTime" type="datetime" value-format="timestamp" format="yyyy-MM-dd HH:mm:ss" placeholder="选择结束时间"
            :editable="false">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="queryList">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="tableData" highlight-current-row ref="multipleTable" stripe style="width: 100%">
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="levelString" label="级别">
        </el-table-column>
        <el-table-column prop="timestmp" label="时间">
          <template slot-scope="scope">
            <span>{{$moment(scope.row.timestmp).format('YYYY-MM-DD HH:mm:ss')}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="formattedMessage" label="描述">
        </el-table-column>
        <el-table-column prop="threadName" label="线程名">
        </el-table-column>
        <el-table-column prop="callerFilename" label="文件名">
        </el-table-column>
        <el-table-column prop="callerClass" label="类名">
        </el-table-column>
        <el-table-column prop="callerMethod" label="方法名">
        </el-table-column>
        <el-table-column prop="callerLine" label="行号">
        </el-table-column>
      </el-table>

      <table-pagination v-if="pagination.totalCount!==0" :pagination="pagination" @change="pageChange"></table-pagination>
    </el-row>
  </el-row>
</template>

<script>
  import LogApi from 'services/logApi';

  import TablePagination from 'commonComponents/tablePagination';

  import Pagination from 'models/pagination';
  import LogSearch from 'models/log/logSearch';

  export default {
    data() {
      return {
        loading: true,
        pagination: new Pagination(),
        search: new LogSearch(),
        tableData: []
      }
    },

    created() {
      this.setLogList();
    },

    methods: {
      queryList() {
        this.pagination.currentPage = 1;
        this.setLogList();
      },

      pageChange() {
        this.setLogList();
      },

      setLogList() {
        this.loading = true;
        LogApi.getAllLogData(this.search, this.pagination).then(tableData => {
          this.tableData = tableData;
          this.loading = false;
        }).catch(() => {
          this.loading = false;
        });
      }
    },

    components: {
      TablePagination
    }
  }

</script>

<style scoped>
  .cm {
    width: 98%;
    margin-top: 15px;
    margin-left: 1%;
  }

  .s1 {
    width: 100%;
    height: 100%;
    background-color: #f1f3f4
  }

</style>
